<template>
   <div class="shequdialog2">
      <!-- 残疾人数弹窗 -->
    <el-dialog
      title="金水区持证残疾人统计汇总情况"
      width="50%"
      :visible.sync="visible2"
    >
      <div class="shuoming-handel2">
        <el-form :inline="true" :model="formInline" class="demo-form-inline" label-width="60px" size="mini" style="width:100%;display:flex;justify-content: space-between;">
          <el-form-item label="街道">
            <el-select v-model="formInline.region1" placeholder="全部" >
              <el-option label="经八路街道办" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-download">导出</el-button>
          </el-form-item>
        </el-form>
      
      </div>
      <el-table :data="tableData" border style="width: 100%" max-height="300"  show-summary>
        <el-table-column prop="jiedaoban" label="街道办"></el-table-column>
        <el-table-column prop="renshu" label="执证人数"> </el-table-column>
      </el-table>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="cancel2"
          >关闭</el-button
        >
      </span>
    </el-dialog>
   </div>
 
 
</template>

<script>
export default {
  name: 'canjirendialog',
  data () {
    return {
        dialogVisible5: false, //社区名单弹窗
        formInline: {
          user: '',
          region1: '',
          region2: '',
          region3: '',
          region4: '',
          region5: '',
          region6: '',
          region7: '',
          region8: '',
          region9: ''
        },
        tableData: [
        {
          jiedaoban: "经八路街道",
          renshu: "786"
        },
        {
          jiedaoban: "经八路街道",
          renshu: "786"
        },
         {
          jiedaoban: "经八路街道",
          renshu: "786"
        },
        {
          jiedaoban: "经八路街道",
          renshu: "786"
        },
         {
          jiedaoban: "经八路街道",
          renshu: "786"
        },
        {
          jiedaoban: "经八路街道",
          renshu: "786"
        },
         {
          jiedaoban: "经八路街道",
          renshu: "786"
        },
        {
          jiedaoban: "经八路街道",
          renshu: "786"
        }
         ],
         showSq:''
    }
  },
  props: {
   visible2: Boolean,
   default: false
  },
  watch: {
   visible2 (newV, oldV) { // watch监听props里status的变化，然后执NPM RUN行操作
    console.log(newV, oldV)
    //this.switchStatusData = newV
   }
 },
  methods:{
    cancel2(){
      console.log('残疾人gb')
      this.$emit('handelCancel2')
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.shuoming-handel2 {
  display: flex;
  justify-content:space-between;
}
.box-list{
   display: flex;
   justify-content: space-between;
 }
 .handel{
   display: flex;
   justify-content: space-between;
 }
 .box{
  width: 220px;
  height:180px;
  background: url(../../../static/panelbox.png) no-repeat;
  text-align: center;
  background-size:100% auto;
  color:#fff;
 }
  .box .text{
    padding:20px 0;
  }
 .box .text span{
   font-size:16px;
   border-radius: 8px;
   padding:5px 50px;
   background: -webkit-linear-gradient(left,#006ae1,#16b7ff);
   background: -webkit-linear-gradient(left,#006ae1,#16b7ff);
		background: -o-linear-gradient(left,#006ae1,#16b7ff);
		background: -moz-linear-gradient(left,#006ae1,#16b7ff);
		background: -mos-linear-gradient(left,#006ae1,#16b7ff);
		background: linear-gradient(left,#006ae1,#16b7ff);
   
 }
 .box .num{
   font-size:32px;
    color:#58dbff;
 }
 
</style>
